import NavBar from './components/NavBar'
import Menu from './components/Menu'
import Cart from './components/Cart'
import FoodsCategory from './components/FoodsCategory'

import './App.scss'
import { useDispatch, useSelector } from 'react-redux'
import { useEffect } from 'react'
import { fetchFood } from './store/modules/takeaway'



const App = () => {
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(fetchFood())
  }, [dispatch])

  const {foods:foodsList,activeIndex} = useSelector(state => state.foods)

  let itemFoods = {}
  if(foodsList.length > 0){
     itemFoods = foodsList[activeIndex]
  }

  return (
    <div className="home">
      {/* 导航 */}
      <NavBar />

      {/* 内容 */}
      <div className="content-wrap">
        <div className="content">
          <Menu foodsList={foodsList}/>

          <div className="list-content">
            <div className="goods-list">
              {/* 外卖商品列表 */}
              {Object.keys(itemFoods).length > 0 && 
                <FoodsCategory
                key={itemFoods.tag.id}
                // 列表标题
                name={itemFoods.tag.name}
                // 列表商品
                foods={itemFoods.foods}
                />
              }
            </div>
          </div>
        </div>
      </div>

      {/* 购物车 */}
      <Cart />
    </div>
  )
}

export default App
